<template>
  <div>
    <div class="inside">
      <div class="left logo">logo</div>
      <div class="right">
        <SmallIcons prompt="外观设置">
        </SmallIcons>
        <div class="vertical-division"></div>
        <SmallIcons prompt="频道收藏">
          <Star />
        </SmallIcons>
        <SmallIcons prompt="搜索一下">
        </SmallIcons>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Star } from "@element-plus/icons-vue";
import SmallIcons from "@/components/other/SmallIcons.vue";
</script>

<style scoped>
.inside {
  display: flex;
  justify-content: space-between;
  margin: 5px 14px;
}

.left {
  margin: 2px 0 0 0;
}

.right {
  /*上下居中*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.vertical-division {
  margin: 0 10px;
  width: 0;
  height: 60%;
  /*边框*/
  border: 1px solid #e1e1e1;
}

.logo {
  font: bold 16px "楷体";
  margin: 0 10px;
}
</style>
